@import "~pc/styles/lib_var.less";
@import "~pc/styles/lib_mixins.less";

.wrapper {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom {
  height: 36px;

  .addBottom {
    width: 16px;
    height: 16px;
    position: relative;
    top: -1px;

    &::before {
      content: '';
      position: absolute;
      top: -9px;
      left: 50%;
      width: 2px;
      height: 10px;
      background-color: var(--primaryColor);
      transform: translateX(-50%);
    }
  }
}


.left {
  width: 36px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -36px;

  .addLeft {
    width: 16px;
    height: 16px;

    &::before {
      content: '';
      position: absolute;
      left: 24px;
      top: 24px;
      width: 12px;
      height: 2px;
      background-color: var(--primaryColor);
    }
  }
}

.right {
  width: 36px;
  height: 100%;
  position: absolute;
  right: -36px;
  top: 0px;

  .addRight {
    width: 16px;
    height: 16px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 7px;
      left: -11px;
      width: 12px;
      height: 2px;
      background-color: var(--primaryColor);
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.addIcon {

  &:hover {
    path {
      fill: var(--primaryColor);
    }

    rect {
      fill: var(--defaultBg);
    }
  }
}